<template>
    <s-popup v-model="showPopup" position="bottom" round :mask="true" mask-close>
      <view class="change-password-container">
        <view class="title">修改个人信息</view>
  
        <view class="form-item">
          <text class="label">真实姓名</text>
          <uni-easyinput
            v-model="form.real_name"
            placeholder="请输入真实姓名"
            clearable
          />
        </view>
  
        <view class="form-item">
          <text class="label">公司</text>
          <uni-easyinput
            v-model="form.company"
            placeholder="请输入公司名称"
            clearable
          />
        </view>
  
        <view class="form-item">
          <text class="label">职位</text>
          <uni-easyinput
            v-model="form.position"
            placeholder="请输入职位"
            clearable
          />
        </view>
  
        <view class="form-item">
          <text class="label">手机号</text>
          <uni-easyinput
            v-model="form.mobile"
            placeholder="请输入手机号"
            type="number"
            maxlength="11"
            clearable
          />
        </view>
        
        <view class="form-item">
          <text class="label">电子邮箱</text>
          <uni-easyinput
            v-model="form.email"
            placeholder="请输入电子邮箱"
            clearable
          />
        </view>
        
        <view class="form-item">
          <text class="label">性别</text>
          <picker @change="onGenderChange" :value="genderIndex" :range="genderArray">
            <view class="picker">
              {{ genderArray[genderIndex] }}
              <text class="arrow"></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="label">底薪</text>
          <uni-easyinput
            v-model="form.basic_salary"
            placeholder="请输入底薪"
            type="number"
            clearable
          />
        </view>
        
        <view class="form-item" v-if="isSubAccount">
          <text class="label">子账号独立手机号</text>
          <uni-easyinput
            v-model="form.sub_mobile"
            placeholder="请输入子账号独立手机号"
            type="number"
            maxlength="11"
            clearable
          />
        </view>
  
        <view class="button-group">
          <s-button type="default" size="small" @click="closePopup"
            >取消</s-button
          >
          <s-button
            type="primary"
            size="small"
            @click="submitForm"
            :loading="loading"
            >保存修改</s-button
          >
        </view>
      </view>
    </s-popup>
  </template>
  
  <script>
  export default {
    name: "v-update-user-info",
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      userData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        showPopup: false,
        loading: false,
        form: {
          real_name: "",
          company: "",
          position: "",
          mobile: "",
          email: "",
          gender: 0,
          basic_salary: 0,
          sub_mobile: ""
        },
        genderArray: ['未知', '男', '女'],
        genderIndex: 0,
        isSubAccount: false
      };
    },
    watch: {
      value(newVal) {
        this.showPopup = newVal;
        if (newVal) {
          this.initForm();
        }
      },
      showPopup(newVal) {
        this.$emit("input", newVal);
      },
      userData: {
        deep: true,
        handler(newVal) {
          this.initForm();
        }
      }
    },
    methods: {
      initForm() {
        this.form = {
          real_name: this.userData.real_name || "",
          company: this.userData.company || "",
          position: this.userData.position || "",
          mobile: this.userData.mobile || "",
          email: this.userData.email || "",
          gender: this.userData.gender || 0,
          basic_salary: this.userData.basic_salary || 0,
          sub_mobile: this.userData.sub_mobile || ""
        };
        
        // 设置性别索引
        this.genderIndex = this.form.gender;
        
        // 判断是否为子账号
        this.isSubAccount = this.userData.is_sub_account === 1;
      },
      
      onGenderChange(e) {
        this.genderIndex = e.detail.value;
        this.form.gender = this.genderIndex;
      },
      closePopup() {
        this.showPopup = false;
      },
      submitForm() {
        if (!this.validateForm()) {
          return;
        }
  
        this.loading = true;
  
        this.sjuAjax.post(
          "/user/update",
          {
            real_name: this.form.real_name,
            nickname: this.form.nickname,
            position: this.form.position,
            mobile: this.form.mobile,
            email: this.form.email,
            gender: this.form.gender,
            basic_salary: this.form.basic_salary,
            sub_mobile: this.form.sub_mobile
          },
          (res) => {
            this.loading = false;
            if (res && res.code === 200) {
              uni.showToast({
                title: res.msg,
                icon: "success",
              });
              this.$emit("update-success", this.form);
              this.closePopup();
            }
          },
          () => {
            this.loading = false;
          }
        );
      },
      validateForm() {
        if (this.form.mobile && !/^1[3-9]\d{9}$/.test(this.form.mobile)) {
          uni.showToast({
            title: "手机号格式不正确",
            icon: "none",
          });
          return false;
        }
        
        if (this.form.email && !/^\S+@\S+\.\S+$/.test(this.form.email)) {
          uni.showToast({
            title: "电子邮箱格式不正确",
            icon: "none",
          });
          return false;
        }
        
        if (this.isSubAccount && this.form.sub_mobile && !/^1[3-9]\d{9}$/.test(this.form.sub_mobile)) {
          uni.showToast({
            title: "子账号手机号格式不正确",
            icon: "none",
          });
          return false;
        }

        return true;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .change-password-container {
    padding: 40rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 40rpx;
      color: #333;
    }

    .form-item {
      margin-top: 32rpx;
      padding: 0 32rpx;

      .label {
        display: block;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        color: #666;
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 60rpx;

      .s-button {
        flex: 1;
        margin: 0 10rpx;
      }
    }
    
    .picker {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 10rpx;
      border: 1rpx solid #e0e0e0;
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
    }
    
    .arrow {
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-top: 2rpx solid #999;
      border-right: 2rpx solid #999;
      transform: rotate(45deg);
    }
  }
  </style>